<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" href="favicon.ico" type="image/x-icon"/>
	<link rel="stylesheet" href="examples-styles.css"/>

	<title>abcjs: Synth Demo</title>

	<style>
        main {
            max-width: 770px;
            margin: 0 auto;
        }
		.hidden {
			display: none;
		}
	</style>

	<script src="../dist/abcjs-basic.js" type="text/javascript"></script>
	<script type="text/javascript">

		var abc =
			"X:1\n" +
			"T: Sonata (fragment)\n" +
			"C: J.S. Bach\n" +
			"M: C\n" +
			"L: 1/8\n" +
			"K:C\n" +
			"[V:1] c/gf/ E/ed/ c/c'b/ A/ag/ | ^f/e/d- d/(c/B/A/) G/(e/c/e/) Aa| d2-d/g/_b/a/ a3 g/=f/|\n" +
			"[V:2] c8- | cB/A/ {A}B>c (e/c/A/c/) (E//^F//E//F//TF3//E///F///) | G/(D/G/A/) _B/G/g/e/ ^cA d2|\n" +
			"[V:3] edcB AG^FE | D^FGg c3d/c/| _BG g2-gf/e/ f>g|\n"

		var synthControl;

		var abcOptions = {
			add_classes: true,
			responsive: "resize"
		};

		var visualObj;

		function load() {
			document.querySelector(".prime").addEventListener("click", prime);
			document.querySelector(".play1").addEventListener("click", play1);
			document.querySelector(".play12").addEventListener("click", play12);
			document.querySelector(".play23").addEventListener("click", play23);
			document.querySelector(".play123").addEventListener("click", play123);
			document.querySelector(".play1s").addEventListener("click", play1s);
			document.querySelector(".play3s").addEventListener("click", play3s);
			visualObj = ABCJS.renderAbc("paper", abc, abcOptions)[0];
		}

		var buffers = []

		function create(voices, ms) {
			return new Promise(function(resolve, reject) {
				var midiBuffer = new ABCJS.synth.CreateSynth();
				midiBuffer.init({
					visualObj: visualObj,
					millisecondsPerMeasure: ms,
					options: {
						chordsOff: true,
						voicesOff: voices
					}
				}).then(function (response) {
					midiBuffer.prime().then(function () {
						resolve({buffer: midiBuffer})
					});
				}).catch(function (error) {
					console.warn("Audio problem:", error);
					reject(error)
				});
			})
		}

		function prime() {
			var button = document.querySelector(".prime")
			button.classList.add("hidden")
			var progress = document.querySelector(".progress")
			progress.classList.remove("hidden")
			var controls = document.querySelector(".after-prime")
			create([1,2], 4000).then(function(r1) {
				buffers[0] = r1.buffer
				return create([2], 4000)
			}).then(function(r2) {
				buffers[1] = r2.buffer
				return create([0], 4000)
			}).then(function(r3) {
				buffers[2] = r3.buffer
				return create([], 4000)
			}).then(function(r4) {
				buffers[3] = r4.buffer
				return create([1,2], 8000)
			}).then(function(r5) {
				buffers[4] = r5.buffer
				return create([0,1], 8000)
			}).then(function(r6) {
				buffers[5] = r6.buffer
				progress.classList.add("hidden")
				controls.classList.remove("hidden")
			})
		}

		function play1() {
			buffers[0].start();
		}

		function play12() {
			buffers[1].start();
		}

		function play23() {
			buffers[2].start();
		}

		function play123() {
			buffers[3].start();
		}

		function play1s() {
			buffers[4].start();
		}

		function play3s() {
			buffers[5].start();
		}

	</script>
</head>
<body onload="load()">
<header>
	<img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo">
	<h1>Reusing Synth</h1>
</header>
<div class="container">
	<main>
		<p>This shows how you can create and save snippets of music so that it is easy to replay them.</p>
		<p>When you click "Prime" all of the buffers are created from the same music - playing different sets of voices
			at different tempos.</p>
		<p>Then the user can play them repeatedly with very little additional processing.</p>
		<button class="prime">Prime</button>
		<div class="progress hidden">Loading. Please wait...</div>
		<div class="after-prime hidden">
			<button class="play1">Play V1</button>
			<button class="play12">Play V1 & V2</button>
			<button class="play23">Play V2 & V3</button>
			<button class="play123">Play V1 & V2 & V3</button>
			<button class="play1s">Play V1 slow</button>
			<button class="play3s">Play V3 slow</button>
		</div>
		<div id="paper"></div>
	</main>
</div>
</body>
</html>
